<template>
    <div class="login">
      <div class="login-wrapper">
        <div class="header">
          <span class="logo"></span>
          <h2>{{'欢迎登录'}}</h2>
        </div>
        <div class="content">
          <div class="error-tip">
            <div v-if="errorActive" class="wrapper">
              <span class="icon">&#10005;</span>
              <span class="text">{{errorText}}</span>
            </div>
          </div>
          <div class="form-wrapper">
            <el-input placeholder="请输入账号" v-model="name" class="input-box">
              <template slot="prepend">
                <div class="bk-acn"></div>
              </template>
            </el-input>
            <el-input placeholder="请输入密码" v-model="password" class="input-box" @keyup.native.enter="handleLogin" type="password">
              <template slot="prepend">
                <div class="bk-acp"></div>
              </template>
            </el-input>
          </div>
          <el-button type="primary" class="submit-btn" @click.native="handleLogin">{{'登录'}}</el-button>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios'
  import { setToken } from '@/utils/auth'
import { debug } from 'util';
  export default {
    data() {
      return {
        errorText:'',
        name:'',
        password:'',
        errorActive:false
      }
    },
    methods:{
      handleLogin(){
        let url = `/szgjadmin/adminUser/adminLogin`
        let params = {
          name: this.name,
          password: this.password
        }
        axios.post(url, params)
        .then(res => {
          console.info(res.data.code)
          if(res.data.code == 200){
            setToken(res.data.result.token)
            localStorage.setItem('username', res.data.result.name)
            localStorage.setItem('SYSTEM_ROLE', res.data.result.role)
            if (res.data.result.role === 'SUPER_ADMIN') {
              this.$router.push('/account')
            } else if(res.data.result.role === 'CHANNEL_ADMIN') {
              this.$router.push('/businessdetails')
            } else if(res.data.result.role === 'STAFF_CHANNEL'){
              this.$router.push('/channel')
            } else {
              this.$router.push('/product')
            }
            //location.reload()
          }else if(res.data.code == 2024){
            this.$msg.error(res.data.msg)
          }else{
            this.$msg.error(res.data.msg)
          }
        })
      }
      
    },
    watch:{
      getErrorTips(newVal, oldVal){
        if(newVal !== oldVal){
          this.errorActive = true
          this.errorText = this.getErrorTips
        }
        console.log('this.errorText', this.errorText)
      },
      getLoginStatus(newVal, oldVal){
        if(newVal !== oldVal){
          this.$router.replace('/home')
          location.reload()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~styles/variables.scss';
  .login{
    width: 100%;
    height: 100%;
    background: url('../assets/login_backgroud.jpg') no-repeat 50% fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  .login-wrapper{
    width: 390px;
    height: 300px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .header{
    text-align:center;
    margin-top:30px;
  h2{
    font-size: 17px;
    color: #2b2d35;
    margin-top: 10px;
  }
  }
  .content{
    width: 100%;
    padding: 20px 30px;
    $color:#d0011b;
    position:relative;
  .submit-btn{
    width: 100%;
  }
  .error-tip{
    border-radius: 4px;
    margin-bottom:10px;
    min-height:25px;
    .wrapper{
      border: 1px solid $color;
    }
  .icon{
    width: 16px;
    height: 16px;
    text-align: center;
    display: inline-block;
    font-size: 10px;
    border-radius: 50%;
    background-color: $color;
    color: #fff;
    margin: 2px 14px;
  }
  .text{
    font-size: 13px;
    color: $color;
  }
  }
  .form-wrapper{
  .input-box{
    margin-bottom: 15px;
  }
  .bk-acn{
    width: 19px;
    height: 19px;
    background-image: url('../assets/person.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bk-acp{
    width: 19px;
    height: 19px;
    background-image: url('../assets/lock.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .bk-acv{
    min-width:70px;
    min-height: 30px;
  img{
    width: inherit;
    height: inherit;
    display: block;
    border-style: none;
    vertical-align: middle;
  }
  }
  }
  }
  }
</style>